@extends('mainlayout')

@section('title','欢迎来到mall商城')

@section('username',$username)

@section('css')
    @parent
@endsection

@section('contents')

    <section class="flat-shop-cart">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="flat-row-title style1">
                        <h3>我的购物车</h3>
                    </div>
                    <div class="table-cart">
                        <table id="tab">
                            <thead>
                            <tr>
                                <th>商品</th>
                                <th>数量</th>
                                <th>小计</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--循环这个tr标签就是一个商品-->
                            @foreach($mycarts as $item)
                            <tr id="mytr">
                                <td>
                                    <input type="checkbox" id="mybox1" name="selected" class="mycheck" checked="checked" style="opacity:1;float:left;">
                                    <div class="img-product">
                                        <a href="{{url('proDetails',['products_id'=>$item->id])}}" title="">
                                            <img src="{{asset($item->previewfile)}}" alt="">
                                        </a>
                                    </div>
                                    <div>
                                        <input class="selectedpid" id="selectedpid" value="{{$item->id}}" readonly="readonly">
                                    </div>

                                    <div class="name-product">
                                        {{$item->name}}<br/>
                                    </div>
                                    <div class="price">
                                        ￥<span class="price">{{$item->price}}</span>
                                    </div>
                                    <div class="clearfix"></div>
                                </td>
                                <td>
                                    <div class="quanlity">
                                        <span class="btn-down"></span>
                                        <input class="text_box" type="text" name="number" value="1" min="1" max="100" placeholder="Quanlity">
                                        <span class="btn-up"></span>
                                    </div>
                                </td>
                                <td>
                                    <label class="littleSum">

                                    </label>
                                </td>
                                <td>
                                    <a href="#" title="">
                                        <img src="images/icons/delete.png" alt="">
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div><!-- /.table-cart -->
                </div><!-- /.col-lg-8 -->
                <div class="col-lg-4">
                    <div class="cart-totals">
                        <h3>总计金额(￥)：</h3>
                        <form action="#" method="get" accept-charset="utf-8">
                            <h2 style="color: #dc322f" id="total">￥1,591.00</h2>
                            <div class="btn-cart-totals">
                                <a href="#" class="checkout" title="" id="alipay">下单支付</a>
                            </div><!-- /.btn-cart-totals -->
                        </form><!-- /form -->
                    </div><!-- /.cart-totals -->
                </div><!-- /.col-lg-4 -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-shop-cart -->
@endsection



@section('js')
    @parent

    <script>
        $(function () {
            //给加号添加点击事件
            $(".btn-up").click(function () {
                var t = $(this).parent().find('input[class*=text_box]');
                t.val(parseInt(t.val())+1)
                setTotal();
                setLittleTotal();
            })

            //给减号添加点击事件
            $(".btn-down").click(function () {
                var t = $(this).parent().find('input[class*=text_box]');
                t.val(parseInt(t.val())-1)
                if(parseInt(t.val())<0){
                    t.val(0);
                    setTotal();
                    setLittleTotal();
                }
                setTotal();
                setLittleTotal();
            })

            //单个商品的金额小计
            function setLittleTotal() {
                var ls = 0;
                $("#tab #mytr").each(function () {
                    ls = parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());
                    $(this).find('label[class*=littleSum]').html(ls.toFixed(2));
                });
            }

            //所有选中的商品的总计金额
            function setTotal() {
                var s = 0;
                $("#tab #mytr").each(function () {
                    $(this).find("input[class*=mycheck]").change(function () {
                        setTotal();
                    });

                    if($(this).find("input[class*=mycheck]").is(':checked')){
                        s+=parseInt($(this).find('input[class*=text_box]').val())*parseFloat($(this).find('span[class*=price]').text());
                    }
                });
                $("#total").html(s.toFixed(2));
            }

            setLittleTotal();
            setTotal();

        })
    </script>

    <script type="text/javascript">
        $('#alipay').on("click",function () {
            //获取当前购买的商品的总金额
            var total = $('h2[id=total]').text();
            var productsJson = getproducts();
            var productsJson = mapToJson(productsJson);

            window.location.href="/alipay/?total="+total+"&"+"productsJson="+productsJson;
        });

        //1.map转换成object
        function strMapToObj(strMap) {
            let obj = Object.create(null);
            for (let[k,v] of strMap){
                obj[k]=v;
            }
            return obj;
        }
        //2.将object转换成json
        function mapToJson(map) {
            return JSON.stringify(this.strMapToObj(map));
        }

        //定义一个方法，用于获取当前购买的商品的总金额 id=>num(key=>value)
        function getproducts() {
            var products = new Map();//键值对的存储  数据格式
            $("#tab #mytr").each(function () {
                if($(this).find("input[class*=mycheck]").is(':checked')){
                    products.set($(this).find('input[class*=selectedpid]').val(),$(this).find('input[class*=text_box]').val())
                }
            });
            return products;
        }

    </script>
@endsection
